<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Highmaps Example</title>

		<style type="text/css">
#container {
    max-width: 400px; 
    height: 360px; 
    margin: 0 auto;
}
#table-div {
    max-width: 400px;
    margin: 3em auto;
}
		</style>
	</head>
	<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../../code/highmaps.js"></script>
<script src="../../code/modules/data.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/offline-exporting.js"></script>
<script src="../../code/mapdata/countries/us/custom/us-small.js"></script>
<div id="container"></div>
<div id="table-div">
    <table id="data">
        <tr>
            <td>1</td>
            <td>HAWAII</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NEW HAMPSHIRE</td>
            <td>2.6</td>
        </tr>
        <tr>
            <td>2</td>
            <td>NORTH DAKOTA</td>
            <td>2.6</td>
        </tr>
        <tr>
            <td>4</td>
            <td>NEBRASKA</td>
            <td>2.7</td>
        </tr>
        <tr>
            <td>5</td>
            <td>IOWA</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>5</td>
            <td>VERMONT</td>
            <td>2.8</td>
        </tr>
        <tr>
            <td>7</td>
            <td>IDAHO</td>
            <td>2.9</td>
        </tr>
        <tr>
            <td>8</td>
            <td>MAINE</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td>8</td>
            <td>WISCONSIN</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td>10</td>
            <td>COLORADO</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>10</td>
            <td>MINNESOTA</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>10</td>
            <td>UTAH</td>
            <td>3.1</td>
        </tr>
        <tr>
            <td>13</td>
            <td>TENNESSEE</td>
            <td>3.2</td>
        </tr>
        <tr>
            <td>14</td>
            <td>INDIANA</td>
            <td>3.4</td>
        </tr>
        <tr>
            <td>14</td>
            <td>KANSAS</td>
            <td>3.4</td>
        </tr>
        <tr>
            <td>16</td>
            <td>ALABAMA</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>16</td>
            <td>MASSACHUSETTS</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>16</td>
            <td>MISSOURI</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>16</td>
            <td>SOUTH DAKOTA</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>20</td>
            <td>ARKANSAS</td>
            <td>3.7</td>
        </tr>
        <tr>
            <td>20</td>
            <td>FLORIDA</td>
            <td>3.7</td>
        </tr>
        <tr>
            <td>20</td>
            <td>VIRGINIA</td>
            <td>3.7</td>
        </tr>
        <tr>
            <td>23</td>
            <td>TEXAS</td>
            <td>3.9</td>
        </tr>
        <tr>
            <td>24</td>
            <td>MARYLAND</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td>25</td>
            <td>MONTANA</td>
            <td>4.1</td>
        </tr>
        <tr>
            <td>25</td>
            <td>OKLAHOMA</td>
            <td>4.1</td>
        </tr>
        <tr>
            <td>25</td>
            <td>OREGON</td>
            <td>4.1</td>
        </tr>
        <tr>
            <td>25</td>
            <td>SOUTH CAROLINA</td>
            <td>4.1</td>
        </tr>
        <tr>
            <td>29</td>
            <td>WYOMING</td>
            <td>4.2</td>
        </tr>
        <tr>
            <td>30</td>
            <td>CALIFORNIA</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>31</td>
            <td>GEORGIA</td>
            <td>4.4</td>
        </tr>
        <tr>
            <td>31</td>
            <td>KENTUCKY</td>
            <td>4.4</td>
        </tr>
        <tr>
            <td>31</td>
            <td>RHODE ISLAND</td>
            <td>4.4</td>
        </tr>
        <tr>
            <td>34</td>
            <td>ARIZONA</td>
            <td>4.5</td>
        </tr>
        <tr>
            <td>34</td>
            <td>NORTH CAROLINA</td>
            <td>4.5</td>
        </tr>
        <tr>
            <td>34</td>
            <td>WASHINGTON</td>
            <td>4.5</td>
        </tr>
        <tr>
            <td>37</td>
            <td>CONNECTICUT</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>37</td>
            <td>DELAWARE</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>37</td>
            <td>LOUISIANA</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>37</td>
            <td>MISSISSIPPI</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>37</td>
            <td>NEW YORK</td>
            <td>4.6</td>
        </tr>
        <tr>
            <td>42</td>
            <td>MICHIGAN</td>
            <td>4.7</td>
        </tr>
        <tr>
            <td>42</td>
            <td>OHIO</td>
            <td>4.7</td>
        </tr>
        <tr>
            <td>42</td>
            <td>PENNSYLVANIA</td>
            <td>4.7</td>
        </tr>
        <tr>
            <td>45</td>
            <td>ILLINOIS</td>
            <td>4.8</td>
        </tr>
        <tr>
            <td>46</td>
            <td>NEVADA</td>
            <td>5.0</td>
        </tr>
        <tr>
            <td>46</td>
            <td>NEW JERSEY</td>
            <td>5.0</td>
        </tr>
        <tr>
            <td>48</td>
            <td>WEST VIRGINIA</td>
            <td>5.5</td>
        </tr>
        <tr>
            <td>49</td>
            <td>DISTRICT OF COLUMBIA</td>
            <td>6.0</td>
        </tr>
        <tr>
            <td>49</td>
            <td>NEW MEXICO</td>
            <td>6.0</td>
        </tr>
        <tr>
            <td>51</td>
            <td>ALASKA</td>
            <td>7.3</td>
        </tr>
    </table>
</div>



		<script type="text/javascript">

// Load the data from the HTML table and tag it with an upper case name used for joining
var data = [],
    // Get the map data
    mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

Highcharts.data({
    table: document.getElementById('data'),
    startColumn: 1,
    firstRowAsNames: false,
    complete: function (options) {
        $.each(options.series[0].data, function () {
            data.push({
                ucName: this[0],
                value: this[1]
            });
        });
    }
});

// Process mapdata
$.each(mapData, function () {
    var path = this.path,
        copy = {
            path: path
        };

    // This point has a square legend to the right
    if (path[1] === 9727) {

        // Identify the box
        Highcharts.seriesTypes.map.prototype.getBox.call({}, [copy]);

        // Place the center of the data label in the center of the point legend box
        this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX); // eslint-disable-line no-underscore-dangle
        this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY); // eslint-disable-line no-underscore-dangle

    }
    // Tag it for joining
    this.ucName = this.name.toUpperCase();
});

// Initiate the chart
Highcharts.mapChart('container', {

    title: {
        text: 'US unemployment rate in Dec. 2017'
    },

    subtitle: {
        text: 'Small US map with data labels'
    },

    mapNavigation: {
        enabled: true,
        enableButtons: false
    },

    xAxis: {
        labels: {
            enabled: false
        }
    },

    colorAxis: {
        labels: {
            format: '{value}%'
        }
    },

    series: [{
        mapData: mapData,
        data: data,
        joinBy: 'ucName',
        name: 'Unemployment rate per 2015',
        states: {
            hover: {
                color: '#a4edba'
            }
        },
        dataLabels: {
            enabled: true,
            formatter: function () {
                return this.point.properties['hc-a2'];
            },
            style: {
                fontSize: '10px'
            }
        },
        tooltip: {
            valueSuffix: '%'
        }
    }, {
        type: 'mapline',
        data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
        color: 'silver'
    }]
});

		</script>
	</body>
</html>
